<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Page with Particle Background</title>
<style>
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: #000;
    }

    canvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #edit-area {
        width: 25%;
        margin: 0 auto;
        margin-top: 100px;
        padding: 20px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    h3 {
        text-align: center;
        margin-bottom: 20px;
    }

    form {
        display: flex;
        flex-direction: column;
    }

    label {
        margin-bottom: 10px;
    }

    input {
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    button {
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="edit-area">
    <h3>新用户注册</h3>
    <form action="{% url 'update' %}" enctype="multipart/form-data" method="post">
        {% csrf_token %}

        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" required>

        <label for="password">密码:</label>
        <input type="password" name="password" id="password" required>

        <label for="check_password">确认密码:</label>
        <input type="password" name="check_password" id="check_password" required>

        <button type="submit">注册</button>
    </form>
<!--	 <button onclick="location.href='{% url 'login' %}'">Go to Login</button>-->
</div>

<script>


    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particlesArray;


    function createParticle() {
        particlesArray = [];
        const numberOfParticles = canvas.width * canvas.height / 9000;

        for (let i = 0; i < numberOfParticles; i++) {
            particlesArray.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                size: Math.random() * 3 + 1,
                speedX: Math.random() * 3 - 1.5,
                speedY: Math.random() * 3 - 1.5
            });
        }
    }


    function drawParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < particlesArray.length; i++) {
            const item = particlesArray[i];
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(item.x, item.y, item.size, 0, Math.PI * 2);
            ctx.fill();

            item.x += item.speedX;
            item.y += item.speedY;

            if (item.x < 0 || item.x > canvas.width) {
                item.speedX = -item.speedX;
            }
            if (item.y < 0 || item.y > canvas.height) {
                item.speedY = -item.speedY;
            }
        }
    }


    function animate() {
        requestAnimationFrame(animate);
        drawParticles();
    }

    createParticle();
    animate();
</script>
</body>
</html>
